<template>
    <div class="courseStyle">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="上课时间" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.courseTime}}</span>
              <!-- <span style="margin-left: 10px">{{ tableData.courseTime}}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="上课人数" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.courseNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="上课时长" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.courseHour}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

<script>

export default {
    name:'Course',
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      this.getList();
    },
    methods: {
      async getList(){
        let result = await this.$http.getCourseList();
        //console.log(result);
        this.tableData = result.data.list;
        // console.log(this.tableData);

      },
      handleEdit(index, row) {
        // console.log(row.id),
        this.$router.push({
          path:'/CourseUpdate',
          query:{id:row.id}
        });
        //console.log(index, row);
      },
      async handleDelete(index, row) {
        // console.log(index, row);
        // console.log(row.id);
        let result = await this.$http.deleteCourse(row.id);
        if(result.code===20000){
          alert("删除成功！");
          location.reload();
          this.$router.go(0);
        }
        else{
          alert("删除失败！");
        }
      }
    }
}
</script>

<style>
.courseStyle{
    margin-left:20%;
    width:1000px;
    position:fixed;
    top:100px;
}
</style>